/*
 * 🎯 "Aperture" 设计系统 - 苹果风格设计令牌
 *
 * 设计哲学：
 * 1. 清晰 (Clarity) - 消除一切歧义
 * 2. 遵从 (Deference) - UI后退，内容成为主角
 * 3. 深度 (Depth) - 毛玻璃和层次创造深度感
 */

/* ===== CSS 自定义属性 (设计令牌) ===== */
:root {
  /* === 色彩系统 === */
  /* 主色调 - 苹果蓝 */
  --aperture-primary: #007AFF;
  --aperture-primary-hover: #0056CC;
  --aperture-primary-light: rgba(0, 122, 255, 0.1);

  /* 背景色系 */
  --aperture-bg-primary: #F5F5F7;
  --aperture-bg-secondary: #FFFFFF;
  --aperture-bg-tertiary: rgba(142, 142, 147, 0.12);

  /* 文字色彩 */
  --aperture-text-primary: #1D1D1F;
  --aperture-text-secondary: #86868B;
  --aperture-text-tertiary: #C7C7CC;

  /* 边框和分割线 */
  --aperture-border-light: rgba(0, 0, 0, 0.08);
  --aperture-border-medium: rgba(0, 0, 0, 0.12);
  --aperture-separator: rgba(60, 60, 67, 0.12);

  /* 状态色彩 */
  --aperture-success: #34C759;
  --aperture-warning: #FF9500;
  --aperture-error: #FF3B30;
  --aperture-info: #007AFF;

  /* 阴影系统 */
  --aperture-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.04);
  --aperture-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06);
  --aperture-shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.08);
  --aperture-shadow-floating: 0 12px 48px rgba(0, 0, 0, 0.12);

  /* === 字体系统 === */
  --aperture-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 字号系统 */
  --aperture-text-xs: 12px;
  --aperture-text-sm: 14px;
  --aperture-text-base: 16px;
  --aperture-text-lg: 18px;
  --aperture-text-xl: 20px;
  --aperture-text-2xl: 24px;
  --aperture-text-3xl: 30px;
  --aperture-text-4xl: 36px;

  /* 字重系统 */
  --aperture-font-light: 300;
  --aperture-font-normal: 400;
  --aperture-font-medium: 500;
  --aperture-font-semibold: 600;
  --aperture-font-bold: 700;

  /* 行高系统 */
  --aperture-leading-tight: 1.2;
  --aperture-leading-normal: 1.5;
  --aperture-leading-relaxed: 1.6;

  /* === 间距系统 (8px 基础网格) === */
  --aperture-space-1: 4px;
  --aperture-space-2: 8px;
  --aperture-space-3: 12px;
  --aperture-space-4: 16px;
  --aperture-space-5: 20px;
  --aperture-space-6: 24px;
  --aperture-space-8: 32px;
  --aperture-space-10: 40px;
  --aperture-space-12: 48px;
  --aperture-space-16: 64px;
  --aperture-space-20: 80px;
  --aperture-space-24: 96px;

  /* === 圆角系统 === */
  --aperture-radius-sm: 8px;
  --aperture-radius-base: 12px;
  --aperture-radius-lg: 16px;
  --aperture-radius-xl: 20px;
  --aperture-radius-2xl: 24px;
  --aperture-radius-full: 50%;

  /* === 动画系统 === */
  --aperture-duration-fast: 0.15s;
  --aperture-duration-normal: 0.25s;
  --aperture-duration-slow: 0.35s;

  /* 苹果风格缓动曲线 */
  --aperture-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --aperture-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --aperture-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --aperture-bg-primary: #000000;
    --aperture-bg-secondary: #1D1D1F;
    --aperture-bg-tertiary: rgba(255, 255, 255, 0.08);

    --aperture-text-primary: #F5F5F7;
    --aperture-text-secondary: #98989D;
    --aperture-text-tertiary: #636366;

    --aperture-border-light: rgba(255, 255, 255, 0.08);
    --aperture-border-medium: rgba(255, 255, 255, 0.12);
    --aperture-separator: rgba(84, 84, 88, 0.48);

    --aperture-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --aperture-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --aperture-shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}

/* ===== 全局基础样式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--aperture-font-family);
  font-size: var(--aperture-text-base);
  font-weight: var(--aperture-font-normal);
  line-height: var(--aperture-leading-normal);
  color: var(--aperture-text-primary);
  background-color: var(--aperture-bg-primary);
  transition: background-color var(--aperture-duration-normal) var(--aperture-ease-out);
}

/* ===== 毛玻璃效果类 ===== */
.frosted-glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(242, 242, 247, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

@media (prefers-color-scheme: dark) {
  .frosted-glass {
    background-color: rgba(29, 29, 31, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.frosted-glass-heavy {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (prefers-color-scheme: dark) {
  .frosted-glass-heavy {
    background-color: rgba(30, 30, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ===== 通用工具类 ===== */

/* 布局 */
.aperture-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--aperture-space-6);
}

.aperture-flex {
  display: flex;
}

.aperture-flex-col {
  flex-direction: column;
}

.aperture-items-center {
  align-items: center;
}

.aperture-justify-center {
  justify-content: center;
}

.aperture-justify-between {
  justify-content: space-between;
}

/* 间距 */
.aperture-p-2 { padding: var(--aperture-space-2); }
.aperture-p-3 { padding: var(--aperture-space-3); }
.aperture-p-4 { padding: var(--aperture-space-4); }
.aperture-p-6 { padding: var(--aperture-space-6); }
.aperture-p-8 { padding: var(--aperture-space-8); }

.aperture-m-2 { margin: var(--aperture-space-2); }
.aperture-m-3 { margin: var(--aperture-space-3); }
.aperture-m-4 { margin: var(--aperture-space-4); }
.aperture-m-6 { margin: var(--aperture-space-6); }
.aperture-m-8 { margin: var(--aperture-space-8); }

/* 文字样式 */
.aperture-text-xs { font-size: var(--aperture-text-xs); }
.aperture-text-sm { font-size: var(--aperture-text-sm); }
.aperture-text-base { font-size: var(--aperture-text-base); }
.aperture-text-lg { font-size: var(--aperture-text-lg); }
.aperture-text-xl { font-size: var(--aperture-text-xl); }
.aperture-text-2xl { font-size: var(--aperture-text-2xl); }
.aperture-text-3xl { font-size: var(--aperture-text-3xl); }

.aperture-font-light { font-weight: var(--aperture-font-light); }
.aperture-font-normal { font-weight: var(--aperture-font-normal); }
.aperture-font-medium { font-weight: var(--aperture-font-medium); }
.aperture-font-semibold { font-weight: var(--aperture-font-semibold); }
.aperture-font-bold { font-weight: var(--aperture-font-bold); }

.aperture-text-primary { color: var(--aperture-text-primary); }
.aperture-text-secondary { color: var(--aperture-text-secondary); }
.aperture-text-tertiary { color: var(--aperture-text-tertiary); }

/* 圆角 */
.aperture-rounded-sm { border-radius: var(--aperture-radius-sm); }
.aperture-rounded-base { border-radius: var(--aperture-radius-base); }
.aperture-rounded-lg { border-radius: var(--aperture-radius-lg); }
.aperture-rounded-xl { border-radius: var(--aperture-radius-xl); }
.aperture-rounded-2xl { border-radius: var(--aperture-radius-2xl); }

/* 阴影 */
.aperture-shadow-light { box-shadow: var(--aperture-shadow-light); }
.aperture-shadow-medium { box-shadow: var(--aperture-shadow-medium); }
.aperture-shadow-heavy { box-shadow: var(--aperture-shadow-heavy); }

/* ===== 动画类 ===== */
.aperture-transition {
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
}

.aperture-transition-fast {
  transition: all var(--aperture-duration-fast) var(--aperture-ease-out);
}

.aperture-transition-slow {
  transition: all var(--aperture-duration-slow) var(--aperture-ease-out);
}

/* 悬停效果 */
.aperture-hover-lift:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: var(--aperture-shadow-medium);
}

.aperture-hover-glow:hover {
  box-shadow: 0 0 0 2px var(--aperture-primary-light);
}

/* ===== 增强动画关键帧 ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-8px); }
  70% { transform: translateY(-4px); }
  90% { transform: translateY(-2px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--aperture-primary); }
  50% { box-shadow: 0 0 20px var(--aperture-primary), 0 0 30px var(--aperture-primary); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== 动画工具类 ===== */
.aperture-fade-in-up {
  animation: fadeInUp var(--aperture-duration-slow) var(--aperture-ease-out);
}

.aperture-fade-in {
  animation: fadeIn var(--aperture-duration-normal) var(--aperture-ease-out);
}

.aperture-slide-in-right {
  animation: slideInRight var(--aperture-duration-slow) var(--aperture-ease-out);
}

.aperture-slide-in-left {
  animation: slideInLeft var(--aperture-duration-slow) var(--aperture-ease-out);
}

.aperture-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.aperture-bounce {
  animation: bounce 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.aperture-shake {
  animation: shake 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.aperture-float {
  animation: float 3s ease-in-out infinite;
}

.aperture-glow {
  animation: glow 2s ease-in-out infinite;
}

.aperture-rotate-in {
  animation: rotateIn var(--aperture-duration-slow) var(--aperture-ease-out);
}

.aperture-zoom-in {
  animation: zoomIn var(--aperture-duration-normal) var(--aperture-ease-out);
}

/* ===== 交互状态动画 ===== */
.aperture-hover-lift {
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
}

.aperture-hover-lift:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--aperture-shadow-medium);
}

.aperture-hover-glow {
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
}

.aperture-hover-glow:hover {
  box-shadow: 0 0 0 2px var(--aperture-primary-light);
}

.aperture-press-down {
  transition: all var(--aperture-duration-fast) var(--aperture-ease-out);
}

.aperture-press-down:active {
  transform: scale(0.96);
  box-shadow: var(--aperture-shadow-light);
}

/* ===== 加载动画 ===== */
.aperture-loading-dots {
  display: inline-flex;
  gap: 4px;
}

.aperture-loading-dots > div {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--aperture-primary);
  animation: loading-dots 1.4s ease-in-out infinite both;
}

.aperture-loading-dots > div:nth-child(1) { animation-delay: -0.32s; }
.aperture-loading-dots > div:nth-child(2) { animation-delay: -0.16s; }
.aperture-loading-dots > div:nth-child(3) { animation-delay: 0s; }

@keyframes loading-dots {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ===== 渐进式披露动画 ===== */
.aperture-stagger-animation > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--aperture-duration-normal) var(--aperture-ease-out) forwards;
}

.aperture-stagger-animation > *:nth-child(1) { animation-delay: 0ms; }
.aperture-stagger-animation > *:nth-child(2) { animation-delay: 100ms; }
.aperture-stagger-animation > *:nth-child(3) { animation-delay: 200ms; }
.aperture-stagger-animation > *:nth-child(4) { animation-delay: 300ms; }
.aperture-stagger-animation > *:nth-child(5) { animation-delay: 400ms; }
.aperture-stagger-animation > *:nth-child(6) { animation-delay: 500ms; }

/* ===== 减少动画偏好支持 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Element Plus 组件覆盖 ===== */

/* 卡片 */
.el-card {
  border: 1px solid var(--aperture-border-light);
  border-radius: var(--aperture-radius-xl);
  box-shadow: var(--aperture-shadow-light);
  background-color: var(--aperture-bg-secondary);
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
}

.el-card:hover {
  box-shadow: var(--aperture-shadow-medium);
  transform: translateY(-1px);
}

.el-card__header {
  padding: var(--aperture-space-6);
  border-bottom: 1px solid var(--aperture-separator);
}

.el-card__body {
  padding: var(--aperture-space-6);
}

/* 按钮 */
.el-button--primary {
  background-color: var(--aperture-primary);
  border-color: var(--aperture-primary);
  border-radius: var(--aperture-radius-lg);
  font-weight: var(--aperture-font-medium);
  padding: var(--aperture-space-3) var(--aperture-space-6);
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
}

.el-button--primary:hover {
  background-color: var(--aperture-primary-hover);
  border-color: var(--aperture-primary-hover);
  transform: scale(1.02);
  box-shadow: var(--aperture-shadow-medium);
}

.el-button--primary:active {
  transform: scale(0.98);
}

/* 输入框 */
.el-input__wrapper {
  border-radius: var(--aperture-radius-lg);
  border: 1px solid var(--aperture-border-light);
  background-color: var(--aperture-bg-secondary);
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
  padding: 0 var(--aperture-space-4);
}

.el-input__wrapper:hover {
  border-color: var(--aperture-primary);
  box-shadow: 0 0 0 2px var(--aperture-primary-light);
}

.el-input__wrapper.is-focus {
  border-color: var(--aperture-primary);
  box-shadow: 0 0 0 2px var(--aperture-primary-light);
}

/* 上传组件 */
.aperture-upload-area {
  border: 2px dashed var(--aperture-border-medium);
  border-radius: var(--aperture-radius-xl);
  background-color: var(--aperture-bg-secondary);
  padding: var(--aperture-space-8) var(--aperture-space-6);
  text-align: center;
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
  cursor: pointer;
}

.aperture-upload-area:hover {
  border-color: var(--aperture-primary);
  background-color: var(--aperture-primary-light);
  transform: scale(1.01);
}

.aperture-upload-area.dragover {
  border-color: var(--aperture-primary);
  background-color: var(--aperture-primary-light);
  box-shadow: 0 0 0 4px var(--aperture-primary-light);
  transform: scale(1.02);
}

/* 描述列表 */
.el-descriptions__title {
  font-size: var(--aperture-text-xl);
  font-weight: var(--aperture-font-semibold);
  color: var(--aperture-text-primary);
  margin-bottom: var(--aperture-space-4);
}

.el-descriptions__label {
  font-weight: var(--aperture-font-medium);
  color: var(--aperture-text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .aperture-container {
    padding: 0 var(--aperture-space-4);
  }

  .aperture-p-6 {
    padding: var(--aperture-space-4);
  }

  .aperture-text-3xl {
    font-size: var(--aperture-text-2xl);
  }
}

@media (max-width: 480px) {
  .aperture-container {
    padding: 0 var(--aperture-space-3);
  }

  .aperture-p-4 {
    padding: var(--aperture-space-3);
  }
}